<template>
  <view class="pageBg">
    <custom-nav-bar title="工单"></custom-nav-bar>
    <wd-tabs sticky :offset-top="topleft" animated @click="clickitem">
      <block v-for="item in list2" :key="item.name">
        <wd-tab :title="item.name">
          <view>
            <custom-orderlist
              v-for="item in orderlist"
              :key="item.id"
              :order="item"
              @complete="handlecomplete"
            ></custom-orderlist>
          </view>
        </wd-tab>
      </block>
    </wd-tabs>
  </view>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store/user/index'
import { computed, reactive, ref } from 'vue'
import { getNavBarHeight } from '@/utils/system'
import { onShow, onHide } from '@dcloudio/uni-app'
import {
  type workOrderDto,
  type orderQuery,
  type PageSize,
  Queryparam
} from '@/API/order/types'
import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'

import { usePageStateStore } from '@/store/PageSate/index'

import { GetOrder } from '@/API/order/index'
const PageStateStore = usePageStateStore()
const tabindex = ref(0)
const userstore = useUserStore()
const _info = uni.getSystemInfoSync()
const topleft = ref(0)
const reachBottomloading = ref(false)
if (_info.statusBarHeight == 0) {
  topleft.value = getNavBarHeight() - 44
} else {
  topleft.value = getNavBarHeight()
}
// 创建响应式数据
const list2 = reactive([
  { name: '全部', value: 0 },
  { name: '未接单', value: 1 },
  { name: '已接单', value: 2 },
  { name: '已完成', value: 3 },
  { name: '通知', value: 4 }
])
const pagesize = reactive<PageSize>({
  pageNum: 1,
  pageSize: 5
})
const calculatedSkipCount = computed(
  () => (pagesize.pageNum - 1) * pagesize.pageSize
)

const orderlist = ref<workOrderDto[]>([])
const totalcount = ref(0)
const refresh = async () => {
  pagesize.pageNum = 1
  const queryparam = ref<orderQuery>({
    PhoneId: userstore.phoneid,
    queryParam: queryparamcomp.value!,
    skipcount: calculatedSkipCount.value,
    maxresultcount: pagesize.pageSize
  })
  const result = await GetOrder(queryparam.value)
  totalcount.value = result.totalCount
  orderlist.value = result.items
  pagesize.pageNum++
}
const handlecomplete = async () => {
  await refresh()
}
const queryparamcomp = computed(() => {
  switch (tabindex.value) {
    case 0:
      return Queryparam.All
    case 1:
      return Queryparam.UnAccept
    case 2:
      return Queryparam.Accept
    case 3:
      return Queryparam.Completed
    case 4:
      return Queryparam.Notify
  }
})
const loadorderlist = async () => {
  if (calculatedSkipCount.value < totalcount.value) {
    const queryparam = ref<orderQuery>({
      PhoneId: userstore.phoneid,
      queryParam: queryparamcomp.value!,
      skipcount: calculatedSkipCount.value,
      maxresultcount: pagesize.pageSize
    })
    const result = await GetOrder(queryparam.value)
    totalcount.value = result.totalCount
    orderlist.value = [...orderlist.value, ...result.items]

    pagesize.pageNum++
  }
}

const clickitem = async ({ index, name }: { index: number; name: string }) => {
  tabindex.value = index
  orderlist.value = []
  await refresh()
}

onShow(async () => {
  console.log('onShow', 'list', PageStateStore.detialstate)
  if (!PageStateStore.detialstate) {
    await refresh()
  }
})

onHide(() => {
  console.log('onHide', 'list')
  PageStateStore.detialstate = false
})

onPullDownRefresh(async () => {
  await refresh()
  uni.stopPullDownRefresh()
})

onReachBottom(async () => {
  if (!reachBottomloading.value) {
    reachBottomloading.value = true
    console.log('reachBottom')
    await loadorderlist()
    reachBottomloading.value = false
  }
})
</script>

<style lang="scss" scoped></style>
